<template>
  <a-card :bordered="false" style="height: 100%; padding-bottom: 200px">
    <div class="table-page-search-wrapper">
      <a-form-model ref="form" :model="formData" layout="inline">
        <!-- 字典搜索  -->
        <!-- <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="字典搜索(同步)" prop="searchValue">
              <j-search-select-tag
                placeholder="请做出你的选择"
                v-model="formData.searchValue"
                :dictOptions="searchOptions"
              >
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">选中值：{{ formData.searchValue }}</a-col>
        </a-row> -->
        <!-- <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="字典搜索(同步,字典code)" prop="searchValue">
              <j-search-select-tag
                placeholder="请做出你的选择"
                v-model="formData.searchValueCode"
                dict="purchase_order_status"
              >
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">选中值：{{ formData.searchValueCode }}</a-col>
        </a-row> -->
        <!--  字典搜索 异步加载 -->
        <!-- <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="字典搜索(异步)" prop="asyncSelectValue">
              <j-search-select-tag
                placeholder="请做出你的选择"
                v-model="formData.asyncSelectValue"
                dict="hz_logistics_provider,name,id,logistics,is_enable='Y'"
                :pageSize="6"
                :async="true"
              >
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">选中值：{{ formData.asyncSelectValue }}</a-col>
        </a-row> -->
      </a-form-model>

      <div>新写的</div>
      <a-form-model ref="form" :model="formDataNew" layout="inline">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="字典搜索新(同步)" prop="searchValue">
              <j-search-select-tag-new
                :uiProps="{ style: { width: '200px' } }"
                placeholder="tt提示"
                :disabled="disabled"
                :multiple="true"
                v-model="formDataNew.searchValue1"
                :dictOptions="searchOptions"
              >
              </j-search-select-tag-new>
              <a-button type="primary" @click="disabled = !disabled"> 切换禁用 </a-button>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">选中值：{{ formDataNew.searchValue1 }}</a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="字典搜索(同步,字典code)" prop="searchValue">
              <j-search-select-tag-new v-model="formDataNew.searchValue2" dictCode="archive_attribute">
              </j-search-select-tag-new>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">选中值：{{ formDataNew.searchValue2 }}</a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="字典搜索(异步)" prop="searchValue">
              <j-search-select-tag-new
                v-model="formDataNew.searchValue3"
                :multiple="true"
                dict="hz_logistics_provider,name,id,logistics"
                :pageSize="6"
              >
              </j-search-select-tag-new>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">选中值：{{ formDataNew.searchValue3 }}<a-button type="primary" @click="formDataNew.searchValue3 = '1846063143561056258'"> 外部修改选中值</a-button></a-col>
          
        </a-row>
      </a-form-model>
    </div>
  </a-card>
</template>
<script>
import JSearchSelectTagNew from '../../components/dict/JSearchSelectTagNew.vue'
export default {
  components: { JSearchSelectTagNew },
  data() {
    return {
      formData: {},
      searchOptions: [
        {
          text: '选项一',
          value: '1',
        },
        {
          text: '选项二',
          value: '2',
        },
        {
          text: '选项三',
          value: '3',
        },
      ],
      formDataNew: {
        // searchValue1:'',
        searchValue2: '',
        searchValue3: '1842741976041308162,1846063143561056258',
      },
      disabled: false,
    }
  },
}
</script>
